'use strict';

import React, { Component } from 'react';
import { InputNumber, Button, Icon, Tooltip } from 'antd';
import { Relax } from 'iflux2';

@Relax
export default class RangeInputNumber extends Component {
  static defaultProps = {
    addCondition: () => {}
  };

  constructor(props) {
    super(props);
    this.state = {
      from: '',
      to: ''
    };
  }

  render() {
    let { from, to } = this.state;
    let { extendInfo: { step, iconMessage } } = this.props;
    let textDom,
      messages = iconMessage ? iconMessage.split('\n') : '';
    if (messages) {
      textDom = (
        <span>
          {messages.map((text, index) => {
            return <p>{text}</p>;
          })}
        </span>
      );
    }
    return (
      <div className="extend-func">
        <InputNumber min={0} value={from} step={step} onChange={this._fromChange} />
        {' - '}
        <InputNumber min={from ? from : 0} value={to} step={step} onChange={this._toChange} />
        <Button type="primary" onClick={this._returnResult}>确定</Button>
        {iconMessage
          ? <span className="filter-tips">
              <Tooltip placement="bottom" title={textDom}>
                <Icon type="info-circle" />
              </Tooltip>
            </span>
          : null}
      </div>
    );
  }

  _fromChange = value => {
    this.setState({ from: value });
  };

  _toChange = value => {
    this.setState({ to: value });
  };

  _returnResult = () => {
    let { from, to } = this.state;
    let { demo, path, extendInfo: { suffix } } = this.props;
    let label = '';
    if (from && to) {
      label = `${from}-${to}`;
    } else if (!from && to) {
      from = 0;
      label = `0-${to}`;
    } else if (from && !to) {
      label = `${from + suffix}`;
    } else {
      return;
    }
    Object.assign(demo, { value: { from, to }, label });
    this.props.addCondition({ value: demo, path });
    this.setState({ from: '', to: '' });
  };
}
